<template>
  <div class="home">
    <Row class="header" type="flex" align="middle">
      <div class="logo">
        <img src="@/assets/logo.png" height="45px" alt="">
        <span>PP</span>ALBUM
      </div>
      <Dropdown class="login-info" placement="bottom-end">
        <Button type="ghost">
          {{ user_name }}
          <Icon type="arrow-down-b"></Icon>
        </Button>
        <Dropdown-menu slot="list">
          <Dropdown-item divided>
            <div @click="lock()"><i class="el-icon-lock"></i>Lock</div>
          </Dropdown-item>
          <Dropdown-item divided>
            <div @click="showProfile()"><i class="el-icon-user"></i>Profile</div>
          </Dropdown-item>
          <Dropdown-item divided>
            <div @click="logOut()"><i class="el-icon-switch-button"></i>Log out</div>
          </Dropdown-item>
        </Dropdown-menu>
      </Dropdown>
    </Row>

    <el-dialog title="PROFILE" :visible.sync="isShowProfile" width="20%">
      <el-form :model="profileForm">
        <el-form-item label="USERNAME" :label-width="profileFormLabelWidth">
          <el-input v-model="profileForm.userName" disabled style="width:320px;"></el-input>
        </el-form-item>
        <el-form-item label="PASSWORD" :label-width="profileFormLabelWidth">
          <el-input v-model="profileForm.passWord" show-password style="width:320px;"></el-input>
        </el-form-item>
        <el-form-item label="PHONE" :label-width="profileFormLabelWidth">
          <el-input v-model="profileForm.phoneNumber" style="width:320px;"></el-input>
        </el-form-item>
        <el-form-item label="BIRTH" :label-width="profileFormLabelWidth">
          <el-date-picker
              v-model="profileForm.birthTime"
              type="date"
              placeholder="选择日期"
              style="width:320px;"
          >
          </el-date-picker>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="isShowProfile = false">取 消</el-button>
        <el-button type="primary" @click="updateProfile()">确 定</el-button>
      </div>
    </el-dialog>

    <div class="sidebar">
      <Menu theme="dark" width="100%" class="menu" :active-name="activeName" :accordion="true" :openNames="openNames">

        <Menu-item name="Home">
          <router-link to="/upload">
            <i class="el-icon-s-home"></i>
            Home
          </router-link>
        </Menu-item>

        <Menu-item name="ImageList">
          <router-link to="/imagelist">
            <i class="el-icon-picture-outline-round"></i>
            Image List
          </router-link>
        </Menu-item>

        <Submenu name="Album">
          <template slot="title">
            <i class="el-icon-files"></i>
            Album
          </template>

          <Menu-item v-for="item in albumList" :key="item.album_id" :name="item.album_id">
            <router-link :to="{name:'ImageList', query:{album_id:item.album_id}}">
              {{ item.type_name }}
            </router-link>
          </Menu-item>

          <Menu-item name="-1">
            <router-link :to="{name:'ImageList', query:{album_id:-1}}">
              Recent delete
            </router-link>
          </Menu-item>
        </Submenu>

        <Submenu name="More">
          <template slot="title">
            <i class="el-icon-lollipop"></i>
            More
          </template>
          <Menu-item name="Analyse">
            <router-link to="/">
              Analyse
            </router-link>
          </Menu-item>
          <Menu-item name="Other">
            <router-link to="/">
              Other
            </router-link>
          </Menu-item>
        </Submenu>

      </Menu>
    </div>
    <div class="main-content" style="height: 100%">
      <router-view></router-view>
      <p class="vm-author">pp-album designed by <a href="#" target="_blank">Hhuany</a></p>
    </div>
  </div>
</template>
<script>
export default {
  name: 'home',
  data() {
    return {
      user_name: "",
      activeName: 'Home',
      albumList: [
        {
          album_id: 0,
          type_name: "default",
          is_top: 1,
        },
      ],
      openNames: ["Album"],
      isShowProfile: false,
      profileForm: {
        userName: '',
        passWord: '',
        phoneNumber: '',
        birthTime: ''
      },
      profileFormLabelWidth: '100px'
    }
  },
  methods: {
    lock() {
      localStorage.removeItem("token");
      localStorage.setItem("isLogin", "false")
      this.CONST.isLogin = false
      this.$router.push("lockScreen")
    },
    logOut() {
      localStorage.removeItem("user_name");
      localStorage.removeItem("token");
      localStorage.setItem("isLogin", "false")
      this.CONST.isLogin = false
      this.$router.push("login")
    },
    showProfile() {
      this.isShowProfile = true;
      const _this = this;
      this.axios.get(_this.API.http_login + 'profile', {
        params: {
          user_name: localStorage.getItem("user_name")
        }
      }).then(function (resp) {
            if (resp.data) {
              const respData = JSON.parse(JSON.stringify(resp.data))
              if (respData.code === 200) {
                _this.profileForm = respData.data
              } else {
                _this.FUN.errorMessage(_this, respData.message);
              }
            } else {
              return false;
            }
          }
      );
    },
    updateProfile() {
      const _this = this;
      this.axios.post(_this.API.http_login + 'update_profile', _this.profileForm).then(function (resp) {
            if (resp.data) {
              const respData = JSON.parse(JSON.stringify(resp.data))
              if (respData.code === 200) {
                _this.FUN.successMessage(_this, respData.message);
                _this.isShowProfile = false
              } else {
                _this.FUN.errorMessage(_this, respData.message);
              }
            } else {
              return false;
            }
          }
      );
    },
    getAlbumList() {
      const _this = this;
      this.axios.get(_this.API.http_album + 'get_list').then(function (resp) {
            if (resp.data) {
              const respData = JSON.parse(JSON.stringify(resp.data))
              if (respData.code === 200) {
                _this.albumList = respData.data
              } else {
                _this.FUN.errorMessage(_this, respData.message);
              }
            } else {
              return false;
            }
          }
      );
    }
  },
  created() {
    this.user_name = localStorage.getItem("user_name")
    this.getAlbumList()
  },
  mounted: function () {
    this.activeName = this.$route.name
    console.log(this.$route.name)
    if (this.$route.name === "Home") {
      this.activeName = "upload"
      this.$router.push("upload")
    }

    if (this.$route.name === "ImageList" && this.$route.query.album_id !== null) {
      this.activeName = this.$route.query.album_id
    }
  }
}
</script>
